<template>
	<view>
		<NavBar text='就诊信息' background='#fff' color="#000" colors='#2fa0da'>
			<template slot='title'>
				<view style="color:#3d90e8;">就诊须知</view>
			</template>
		</NavBar>
		<view style="width: 100%; height: 160rpx;"></view>
		<view>
			<view class="top flxAlign">
				<view style="width: 95%; margin:0 auto;" class="flx">
					<view class="flx1 top_left">
						<view class="flxAlign">
							<view class="top_left_image">
								<image src="/static/reservationRegister/ghr.png"></image>
							</view>
							<view class="top_left_name">就诊人</view>
						</view>
					</view>
					<view class="top_right">{{name}}</view>
				</view>
			</view>
			<view class="centre">
				<view class="centre_top">
					<view class="centre_top_text">就诊信息</view>
				</view>
				<view class="centre_c">
					<view class="flx1">
						<view class="centre_c_text">医院</view>
						<view class="centre_c_text_">{{info.name}}</view>
					</view>
					<view class="flx1">
						<view class="centre_c_text">医生</view>
						<view class="centre_c_text_">{{info.dortorname}}</view>
					</view>
					<view class="flx1">
						<view class="centre_c_text">科目</view>
						<view class="centre_c_text_">{{info.kmname}}</view>
					</view>
					<view class="flx1">
						<view class="centre_c_text">就诊时间</view>
						<view class="centre_c_text_">{{info.date}}</view>
					</view>
					<view class="flx1">
						<view class="centre_c_text">挂号费</view>
						<view class="centre_c_text_">{{info.parer}}</view>
					</view>
				</view>
				<view style="width: 100%; height: 30rpx;"></view>
			</view>
			<view class="bottom">
				<view style="width: 95%; margin:0 auto;">
					<view class="bottom_">温馨提示</view>
					<view class="bottom_text">{{textbart}}</view>
					<view style="width: 100%; height: 20rpx;"></view>
				</view>
			</view>

			<view class="button" @click="show = true">确定</view>
			<u-popup :show="show" @close="close" @open="open" :closeable='true' :safeAreaInsetTop='true'
				:customStyle='customStyles' closeIconPos='top-right'>
				<view>
					<view style="text-align: center; margin-top:28rpx;">支付</view>
					<view
						style="width: 100%; height: 80rpx; line-height: 80rpx; font-weight: 600; font-size: 50rpx; text-align: center; margin-top:20rpx;">
						<span style="font-size: 30rpx;">￥</span>10.00</view>
					<view style="width: 95%; margin:0 auto; margin-top:20rpx;">支付方式</view>
					<u-radio-group v-model="checked" iconPlacement="right" placement='column'>
						<view style="width: 90%; margin:0 auto;">
							<view class="flx" style="margin-top:40rpx;">
								<view class="flx1">
									<view class="imasge">
										<image src="/static/reservationRegister/zfb.png"></image>
									</view>
									<view style="margin-left: 20rpx;">支付宝</view>
								</view>
								<view>
									<u-radio :name="1" shape="circle"></u-radio>
								</view>
							</view>
							<view class="flx" style="margin-top:40rpx;">
								<view class="flx1">
									<view class="imasge">
										<image src="/static/reservationRegister/hb.png"></image>
									</view>
									<view style="margin-left: 20rpx;">花呗</view>
								</view>
								<view>
									<u-radio :name="2" shape="circle"></u-radio>
								</view>
							</view>
							<view class="flx" style="margin-top:40rpx;">
								<view class="flx1">
									<view class="imasge">
										<image src="/static/reservationRegister/wx.png"></image>
									</view>
									<view style="margin-left: 20rpx;">微信</view>
								</view>
								<view>
									<u-radio :name="3" shape="circle"></u-radio>
								</view>
							</view>
							<view class="button" @click="onclick" style="margin-top: 100rpx;">确定</view>
							<view style="width: 100%; height: 60rpx;"></view>
						</view>
					</u-radio-group>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				show: false,
				name: '赵大',
				checked: "",
				info: {
					name: '南京天佑儿童医院',
					dortorname: '武翠凡',
					kmname: '多动症门诊',
					date: '2020-03-31周二上午',
					parer: 20
				},
				textbart: '1、预约规则及注意事项，请您仔细阅读右上角“就诊须知”。2、如在半年内连续发生三次预约未就诊情形且又未按照规定的时间取消预约，南京卫生12320将会取消半年内网上预约挂号资格。 3、对于恶意预约挂号者(随意预约、贩卖专家号)，南京卫生12320将取消注册资格。',
				customStyles: {
					borderRadius: '20rpx 20rpx 0 0'
				}
			}
		},
		onLoad(params){
			let array = JSON.parse(params.datas) 
			this.info.name = array.hospital
			this.info.dortorname = array.name
			this.info.kmname = array.ks
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			onclick(){
				let data = JSON.stringify(this.info)
				uni.navigateTo({
					url:'/pages/reservationRegister/RegistrationSuccessful?datas=' + data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;

	}

	.top {
		width: 100%;
		background-color: #fff;
		height: 80rpx;

		.top_left {
			.top_left_image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.top_left_name {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.top_right {
			font-size: 30rpx;
			color: #96cce6;
		}
	}

	.centre {
		width: 100%;
		background-color: #fff;
		margin-top: 35rpx;

		.centre_top {
			width: 100%;
			border-bottom: 1rpx solid #cecece;

			.centre_top_text {
				width: 95%;
				margin: 0 auto;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #9da0a1;
				font-weight: 600;
				letter-spacing: 1rpx;
			}
		}

		.centre_c {
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;

			.centre_c_text {
				width: 145rpx;
				font-size: 32rpx;
				letter-spacing: 1rpx;
				color: #9da0a1;
			}

			.centre_c_text_ {
				font-size: 30rpx;
				letter-spacing: 1rpx;
				margin-left: 20rpx;
			}
		}
	}

	.bottom {
		margin-top: 35rpx;
		width: 100%;
		background-color: #fff;

		.bottom_ {
			line-height: 80rpx;
			font-size: 30rpx;
			letter-spacing: 1rpx;
		}

		.bottom_text {
			font-size: 32rpx;
			letter-spacing: 2rpx;
		}
	}

	.button {
		width: 90%;
		margin: 0 auto;
		background-color: #ff9900;
		border-radius: 20rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 1rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.imasge {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>